<template>
    <div>
        <ListDetailsHandle>
            <div slot="topNav-content">
                <p>全部评价</p>
            </div>
        </ListDetailsHandle>

        <div class="under-line"></div>

        <!-- 评论内容 -->
        <div class="evaluation-content">
            
            <div class="evaluation-detail">
                <!-- 头像 -->
                <div class="user-headPortrait">
                    <img src="../../../../assets/images/swiper3.jpg" alt="">
                </div>
                <!-- 评价 -->
                <div class="user-information">
                    <div class="userNameAndTime">
                        <div class="userName">用户122321</div>
                        <div class="userTime">01月06日 15:49</div>
                    </div>
                    <div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span></div>
                    <div class="user-content">
                        好评好评！这真的是一款好产品，不管是颜色还是价格都很好，强雷推荐给大家！
                    </div>
                    <div class="user-image">
                        <div class="user-image-shiji">
                            <img src="../../../../assets/images/swiper3.jpg" alt="">
                        </div>
                       <!-- 遍历 -->
                        
                    </div>
                    <div class="evaluation-underline"></div>
                </div>
                
            </div>

            
        </div>
    </div>
</template>

<script>
import ListDetailsHandle from './detailsComponents/ListDetailsHandle.vue'
export default {
    name:'UserEvaluation',
    data(){
        return{

        }
    },
    components:{
        ListDetailsHandle
    }

}
</script>

<style lang='less' scoped>
*{
    background-color: white;
}
.under-line{
    width: 100%;
    height: 1px;
    background-color: #F3F4F5 ;
    margin-bottom: 10px;
}
.evaluation-content{
    width:100%;
    min-height: 200px;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
}
.evaluation-detail{
    width: 100%;
    min-height: 200px;
    margin-top: 12px;
    .user-headPortrait{
        width:42px;
        height: 42px;
        border-radius: 50%;
        float: left;
        margin-right: 9px;
        img{
            width:100%;
            height:100%;
            border-radius: 50%;
        }
    }
    .user-information{
        float: left;
        width: 292px;
        min-height:100px ;
        .userNameAndTime{
            width: 100%;
            height: 23px;
            margin-bottom: 4px;
            .userName{
                width: 65px;
                height: 23px;
                line-height: 23px;
                color: rgba(102, 102, 102, 1);
                font-size: 12px;
                text-align: center;
                font-family: Arial;
                float: left;
            }
            .userTime{
                width: 85px;
                height: 23px;
                line-height: 23px;
                color: rgba(153, 153, 153, 1);
                font-size: 12px;
                text-align: center;
                font-family: Arial;
                float: right;
            }
        }
        .stars{
            width: 100%;
            height: 12px;
            font-size: 12px;
            line-height: 12px;
            span{
                margin-right: 0px;
            }
        }
        .user-content{
            width: 295px;
            height: 40px;
            line-height: 20px;
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            font-family: Arial;
            margin-top: 12px;
        }
        .user-image{
            width: 100%;
            height: 67px;
            margin-top: 13px;
            margin-bottom: 13px;
            .user-image-shiji{
                width: 67px;
                height: 67px;
                margin-right: 9px;
                float: left;
                img{
                    width:100%;
                    height: 100%;
                }
            }
            div:last-child{
                margin-right: 0;
            }
            
        }
        
    }
}
.evaluation-underline{
    width:100%;
    height: 1px;
    background-color: #F3F4F5;
}
</style>
